<template>
  <div style="display: flex; flex-direction: column;">
    <div class="funcs">
      <div @click="isSelected = func" class="func" v-for="func in funcs" :key="func">
        <div class="text" :style="`color: ${ isSelected === func?'black':'#8e8e8e' };`">{{func}}</div>
        <div class="underline" :style="`background: ${ isSelected === func?'#8e8e8e':'white' };`"/>
      </div>
    </div>
    <AICreate v-if="isSelected === 'AI创作'"/>
    <MaterialSearch v-if="isSelected === '知识库'"/>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import AICreate from './AICreate.vue'
import MaterialSearch from './MaterialSearch.vue'

const funcs = ref(['AI创作','知识库'])
const isSelected = ref('AI创作')
</script>

<style lang="scss" scoped>
.funcs{
  display: flex;
  border-bottom: 1px solid #dfdfdf;
  .func{
    display: flex;
    flex-direction: column;
    padding: 5px 30px;
    cursor: pointer;
    .text{
      line-height: 2em;
      font-weight: 700;
      font-size: 14px;
    }
    .underline{
      height: 5px;
      width: 85%;
      border-radius: 5px;
      margin: 0 auto;
      transition: 0.2s linear;
    }
  }
}
</style>
